<template>
<div>
<div id="home" style="height:calc(100vh - 170px);width:100%;height:300%"></div>
<div id="reade" style="height:calc(100vh - 170px);width:100%;height:300%"></div>
</div>

</template>

<script>

import * as echarts from 'echarts'

import { getHome } from '../api/home'
import { getHomeReade } from '../api/homeReade'

export default {
  data () {
    return {
      articles: [],
      arb: [],
      readerNumber: []
    }
  },
  name: 'Home',
  mounted () {
    this.reader()
    this.fetchData()
  },
  components: {

  },
  methods: {
    fetchData () {
      getHome().then(({ data }) => {
        console.log(data.data)
        this.articles = data.data

        data.data.forEach(item => {
          this.arb.push({ value: item.count, name: item.articleClassName })
        })

        this.initSomething()

        console.log(this.articles)
      })
    },
    fetchReadeData () {
      getHomeReade().then(({ data }) => {
        data.data.push({})
      })
    },

    initSomething () {
      var chartDom = document.getElementById('home')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '文章分类及相应的文章数量',
          subtext: '实时更新数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: this.arb,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    reader () {
      var chartDom = document.getElementById('reade')
      var myChart = echarts.init(chartDom)
      var option

      var data = []
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 50))
      }

      option = {
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E'],
          inverse: true,
          animationDuration: 100,
          animationDurationUpdate: 100,
          max: 2 // only the largest 3 bars will be displayed
        },
        series: [{
          realtimeSort: true,
          name: 'X',
          type: 'bar',
          data: data,
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 500,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }

      function run () {
        var data = option.series[0].data
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 100)
          } else {
            data[i] += Math.round(Math.random() * 100)
          }
        }
        myChart.setOption(option)
      }

      setTimeout(function () {
        run()
      }, 0)
      setInterval(function () {
        run()
      }, 3000)

      option && myChart.setOption(option)
    }
  }
}

</script>
